import { connect, PageDetailModelState, Loading } from 'umi';
import React, { useEffect } from 'react';
import { Row, Col } from 'antd';
import Chart from './components/chart';

interface Props {
  pageDetail: PageDetailModelState;
}

const PageDetail: React.FC<Props> = ({ pageDetail }) => {
  const { data } = pageDetail;
  return (
    <div>
      {data?.row ? (
        <div>
          {data.row.map((item: any) => (
            <Row key={item.id}>
              {item.cols.map((col: any, i: number) => (
                <Col span={col.width * 2} key={`${i + 1}`}>
                  <Chart chart_id={col.chart_id} cloud={data.cloud} />
                </Col>
              ))}
            </Row>
          ))}
        </div>
      ) : null}
    </div>
  );
};

export default connect(
  ({
    pageDetail,
    loading,
  }: {
    pageDetail: PageDetailModelState;
    loading: Loading;
  }) => ({
    pageDetail,
    loading: loading.models.myHost,
  }),
)(PageDetail);
